<template>
  <van-form @submit="onSubmit" ref="form">
    <van-cell-group inset>
      <van-field
        v-model="account"
        name="account"
        placeholder="账号"
        :rules="mobileRules"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="密码"
        :rules="passwordRules"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script lang="ts" setup>
import { type FormInstance, showSuccessToast } from 'vant'
//提供校验规则
import type { FieldRule } from 'vant'
import { useRouter } from 'vue-router'

// 表单校验
const mobileRules: FieldRule[] = [
  { required: true, message: '请输入账号' },
  { pattern: /^1\d{10}$/, message: '账号格式错误' }
]

const passwordRules: FieldRule[] = [
  { required: true, message: '请输入密码' },
  { pattern: /^\w{8,24}$/, message: '密码需8-24个字符' }
]
import { ref } from 'vue'
const account = ref('')
const password = ref('')
const router = useRouter()
const form = ref<FormInstance>()
const onSubmit = async () => {
  await form.value?.validate()
}
</script>

<style lang="scss" scoped></style>
